<template>
  <div class="profile-container">
    <div v-if="profile" class="profile-wrap">
      <div class="avatar-wrap" :style="{ backgroundImage: `url(${profile.avatar || defaultAvatar})` }" />
      <div class="main-wrap">
        <div class="header">
          <h3 v-if="profile.enName">
            {{ profile.enName }}
          </h3>
          <h4>{{ profile.cnName }}</h4>
        </div>
        <!-- eslint-disable-next-line vue/no-v-html -->
        <div class="body" v-html="profile.introduction" />
        <div v-if="profile.github || profile.email" class="footer">
          <a v-if="profile.github" :href="profile.github" title="GitHub" target="_blank"><font-awesome-icon :icon="['fab', 'github']" /> {{ profile.github }}</a>
          <span v-if="profile.email" title="Email"><font-awesome-icon :icon="['far', 'envelope']" /> {{ profile.email }}</span>
        </div>
      </div>
    </div>
    <div v-else class="empty-profile">
      <a-empty>
        <span slot="description">暂无内容</span>
      </a-empty>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import MarkdownIt from 'markdown-it';
import hljs from 'highlight.js';
import { IProfile, ISetting } from '@/types/schema';
import { Context } from '@nuxt/types/index';
import '@/static/article.less';
export default Vue.extend({
  name: 'PageProfile',
  async asyncData ({ $axios, error }: Context) {
    const { code, data } = await $axios.$get('/api/profile');
    if (code === 1) {
      const profile = data.profile;
      const md = new MarkdownIt({
        html: true,
        // breaks: true,
        // linkify: true,
        highlight (str, lang) {
          let showLang = '';
          let code = '';
          if (lang) {
            showLang = lang.toUpperCase();
            if (showLang === 'JS') {
              showLang = 'JAVASCRIPT';
            } else if (showLang === 'TS') {
              showLang = 'TYPESCRIPT';
            }
            const langObj = hljs.getLanguage(lang);
            if (langObj) {
              try {
                code = hljs.highlight(lang, str, true).value;
              } catch (err) {}
            }
          }
          if (!code) {
            code = md.utils.escapeHtml(str);
          }

          // 特殊：信息代码块
          if (showLang === 'INFO') {
            return `<pre class="hljs info"><code><svg aria-hidden="true" focusable="false" data-prefix="fal" data-icon="info-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-info-circle"><path fill="currentColor" d="M256 40c118.621 0 216 96.075 216 216 0 119.291-96.61 216-216 216-119.244 0-216-96.562-216-216 0-119.203 96.602-216 216-216m0-32C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm-36 344h12V232h-12c-6.627 0-12-5.373-12-12v-8c0-6.627 5.373-12 12-12h48c6.627 0 12 5.373 12 12v140h12c6.627 0 12 5.373 12 12v8c0 6.627-5.373 12-12 12h-72c-6.627 0-12-5.373-12-12v-8c0-6.627 5.373-12 12-12zm36-240c-17.673 0-32 14.327-32 32s14.327 32 32 32 32-14.327 32-32-14.327-32-32-32z" class=""></path></svg>${code}</code></pre>`;
          }

          // 特殊：警告代码块
          if (showLang === 'ALERT') {
            return `<pre class="hljs alert"><code><svg aria-hidden="true" focusable="false" data-prefix="fal" data-icon="exclamation-triangle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="svg-inline--fa fa-exclamation-triangle"><path fill="currentColor" d="M270.2 160h35.5c3.4 0 6.1 2.8 6 6.2l-7.5 196c-.1 3.2-2.8 5.8-6 5.8h-20.5c-3.2 0-5.9-2.5-6-5.8l-7.5-196c-.1-3.4 2.6-6.2 6-6.2zM288 388c-15.5 0-28 12.5-28 28s12.5 28 28 28 28-12.5 28-28-12.5-28-28-28zm281.5 52L329.6 24c-18.4-32-64.7-32-83.2 0L6.5 440c-18.4 31.9 4.6 72 41.6 72H528c36.8 0 60-40 41.5-72zM528 480H48c-12.3 0-20-13.3-13.9-24l240-416c6.1-10.6 21.6-10.7 27.7 0l240 416c6.2 10.6-1.5 24-13.8 24z" class=""></path></svg>${code}</code></pre>`;
          }

          // 特殊：以冒号开头的，视为特殊代码块
          if (showLang.startsWith(':')) {
            const header = showLang.substring(1);
            return `<pre class="hljs custom"><div class="pre-header">${header}</div><code>${code}</code></pre>`;
          }
          return (
            '<pre class="hljs"><div class="pre-header"><div class="pre-header-left"><div></div><div></div><div></div></div><div class="pre-header-right">' +
                    showLang +
                    '</div></div><code>' +
                    code +
                    '</code></pre>'
          );
        }
      });
      profile.introduction = md.render(profile.introduction).replace(
        /:([\w-]+?):/g,
        '<i class="icon-emoji" style="background-image: url(/images/emojis/$1.png);"></i>'
      );
      return {
        profile
      };
    } else {
      error({
        statusCode: 404,
        message: '未找到该页面'
      });
    };
  },
  data () {
    return {
      profile: {} as IProfile,
      defaultAvatar: ''
    };
  },
  head (this: any) {
    const settings = this.$store.state.settings as ISetting;
    const suffix = ` - ${settings.blogName}`;
    return {
      title: '关于' + suffix,
      meta: [
        { hid: 'description', name: 'description', content: settings.blogIntro || settings.blogName },
        { name: 'keywords', content: settings.blogName }
      ]
    };
  }
});
</script>
<style scoped>
.profile-container {
  min-height: 90vh;
}

.profile-wrap {
  background-image: linear-gradient(-90deg,#00BCD4 0,#1890ff 100%);
  border-radius: 10px;
  max-width: 680px;
  margin: 0 auto;
  position: relative;
  padding: 30px;
  top: 100px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.avatar-wrap {
    width: 120px;
    height: 120px;
    background-size: contain;
    background-color: #ccc;
    border-radius: 50%;
    border: 3px solid #fff;
    position: absolute;
    top: -60px;
    left: 50%;
    margin-left: -60px;
}

.main-wrap {
  color: #fff;
  padding-top: 55px;
}

.main-wrap .header {
  text-align: center;
}

.main-wrap .header h3 {
  font-size: 36px;
  color: #fff;
  font-weight: 300;
  margin-bottom: 5px;
}

.main-wrap .header h4 {
  font-size: 32px;
  color: #fff;
  font-weight: 400;
}

.main-wrap .body {
  font-size: 16px;
  margin-top: 40px;
  white-space: pre-line;
}

.main-wrap .footer {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  font-size: 15px;
}

.main-wrap .footer a {
  color: #fff;
  display: block;
}

.empty-profile {
  padding-top: 150px;
}

@media (max-width: 576px) {
  .profile-wrap {
    border-radius: 0;
  }

  .main-wrap .footer {
    display: block;
  }
}
</style>
